<template>
  <div class="layout-container">
    <main class="main">
      <!-- 二级路由 -->
      <keep-alive include="readHome">
        <router-view />
      </keep-alive>
    </main>
    <footer class="footer">
      <FooterBar :links="links"></FooterBar>
    </footer>
  </div>
</template>

<script>
import FooterBar from '@/components/FooterBar.vue'
export default {
  components: { FooterBar },
  data() {
    return {
      links: [
        {
          path: '/layout/readHome',
          text: '阅读',
          icon: 'fire-o',
          selectedIcon: 'icon-homefill',
        },
        {
          path: '/layout/bookRack',
          text: '书架',
          icon: 'wap-home-o',
          selectedIcon: 'icon-fenlei1',
        },
        {
          path: '/layout/findPage',
          text: '发现',
          icon: 'volume-o',
          selectedIcon: 'icon-gouwucheman',
        },
        {
          path: '/layout/mine',
          text: '我的',
          icon: 'friends-o',
          selectedIcon: 'icon-gerenzhongxin',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
// scoped 会有作用域，只让css代码在这个文件生效
.layout-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  height: 50px;
  background: red;
}
.main {
  flex: 1;
  height: 100%;
  // overflow: auto;
  // overflow: hidden;
}
.footer {
  height: 50px;
  background: #eee;
}
</style>
